<template>
	<view class="invite-box">
		<view class="invite-nav">
			<image :src="$imgUrl + '/personal/back-icon.png'" class="image" @click="back" mode=""></image>
			<view class="view">邀请列表</view>
			<view class="image" style="visibility: hidden;"></view>
		</view>
		<view class="invite-car-b">
			<view class="invite-card">
				<view class="invite-c-l">
					<view class="invite-c-l-num">{{InviteSummaryData?.count||'0'}}</view>
					<view class="invite-c-l-p">邀请总人数</view>
				</view>
				<view class="invite-c-l">
					<view class="invite-c-l-num">{{InviteSummaryData?.total||'0'}}</view>
					<view class="invite-c-l-p">奖励积分积累</view>
				</view>
				<view class="invite-c-l">
					<view class="invite-c-l-num">{{InviteSummaryData?.today||'0'}}</view>
					<view class="invite-c-l-p">今日邀请人数</view>
				</view>
			</view>
		</view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="share-btn" @click="shareBtn">分享邀请</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button class="share-btn" open-type="share" type="default" data-name="shareBtn" @click="miniShare">分享邀请</button>
		<!-- #endif -->
		<view class="invite-tips" v-if="InviteConfigData.illustrate">
			{{InviteConfigData.illustrate}}
		</view>
		<view class="invite-label">
			<span></span>
			<view>奖励明细</view>
		</view>
		<view class="invite-list">
			<scroll-view  style="height: 100%;padding-bottom: 20rpx;">
				<view class="invite-list-item" v-for="(item, index) in InviteLogsData" :key="index">
					<view class="invite-list-item-left">
						<view class="left-t">邀请成功</view>
						<view class="left-o">邀请用户:{{item.invitePhone}}</view>
						<view class="left-o">完成时间:<uni-dateformat :date="item.createTime"></uni-dateformat></view>
					</view>
					<view class="invite-list-item-right">+{{item.rewardPoint}}积分</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<!-- 分享弹窗 -->
	<uni-popup ref="sharepoup" type="center" background-color="rgba(0,0,0,0)">
		<view class="share-poup">
			<view class="share-icon">
				<image :src="$imgUrl + '/personal/wxchat-icon.png'" mode=""></image>
			</view>
			<button class="share-btn" @click="mpShare">分享至微信</button>
		</view>
		<view class="uni-icon">
			<u-icon name="close-circle" color="#fff" @click="closeShare" size="32"></u-icon>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
	import { getInviteSummary, getInviteLogs, getInviteConfig } from "@/common/API/invite"
	import { onLoad } from "@dcloudio/uni-app"
	import { ref, reactive } from 'vue'
	import config from '@/utils/config'
	const winH = ref(uni.getWindowInfo().windowHeight + "px")
	const sharepoup = ref(false)
	const InviteSummaryData = ref({})
	const InviteConfigData = ref({})
	const InviteLogsData = ref({})
	const now = ref(Date.now())
	const page = reactive({
		pageNo: 1,
		pageSize: 200
	})
	onLoad(() => {
		InviteSummary()
		InviteLogs()
		InviteConfig()
	})

	//汇总
	const InviteSummary = async () => {
		let res = await getInviteSummary()
		InviteSummaryData.value = res
	}
	//列表
	const InviteLogs = async () => {
		let res = await getInviteLogs(page)
		InviteLogsData.value = res.list
		console.log(res, '333');
	}
	//活动配置
	const InviteConfig = async () => {
		let res = await getInviteConfig()
		InviteConfigData.value = res
		console.log(res);
	}

	//分享到微信
	const mpShare = () => {
		// #ifdef APP-PLUS
		let userId = uni.getStorageSync('userId')
		console.log(userId)
		sharepoup.value.close()
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 5,
			miniProgram: {
			    id:  config.wxChatAppId,
			    path: `/pages/index/index?oldId=${userId}&from=invite`,
				type: 0,
				webUrl: 'http://uniapp.dcloud.io'
			},
			title: "嗨～送你一份惊喜礼包，快来领取吧",    // 分享标题
			summary: "嗨～送你一份惊喜礼包，快来领取吧",    // 分享内容文字
			imageUrl: "http://nanshufang-prod.obs.cn-sh1.ctyun.cn/assets/tenant-images/personal/share.png",    //分享封面图片
			success: function(res) {
				console.log(res)
			},
			fail: function(err) {
				console.log(err)
			}
		});
		// #endif
	}

	//分享到微信小程序
	const miniShare = () => {
		sharepoup.value.close()
	}
	//打开弹窗
	const shareBtn = () => {
		sharepoup.value.open()
	}
	//关闭分享
	const closeShare = () => {
		sharepoup.value.close()
	}
	const back = () => {
		uni.switchTab({
			url: '/pages/personal/index'
		})
	}
</script>
<style>
	page {
		height: 100vh;
		background: linear-gradient(180deg, rgba(254, 145, 105, 0.2) 0%, rgba(255, 88, 107, 0) 100%) no-repeat;
		background-size: 750rpx 360rpx;
	}
</style>
<style lang="scss" scoped>
	.invite-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	.invite-nav {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
		height: var(–status-bar-height);
		padding-top: 50px;
		.image {
			width: 17rpx;
			height: 31rpx;
			padding: 0 32rpx;
		}

		.view {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.invite-car-b {
		width: 686rpx;
		height: 240rpx;
		margin: 0 auto;
		border-radius: 24rpx;
		margin-top: 20px;
		background: linear-gradient(90deg, rgba(255, 225, 110, 1) 0%, rgba(255, 199, 62, 1) 100%);
	}

	.invite-card {
		width: 100%;
		height: 100%;
		background: url('#{$imgUrl}/personal/coin-icon.png') no-repeat top right;
		background-size: 248rpx 260rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&>view {
			flex: 1;

			&>view {
				text-align: center;
				color: rgba(100, 52, 0, 1);
			}

			.invite-c-l-num {
				font-size: 68rpx;
				font-weight: bold;
			}

			.invite-c-l-p {
				font-size: 24rpx;
				margin-top: -14rpx;
			}
		}

	}

	.share-btn {
		width: 686rpx;
		height: 96rpx;
		border-radius: 450rpx;
		background: linear-gradient(90deg, rgba(235, 84, 59, 1) 0%, rgba(242, 161, 64, 1) 100%);
		box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.04);
		margin: 32rpx auto 34rpx auto;
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
	}

	.invite-tips {
		width: 686rpx;
		min-height: 196rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.04);
		margin: 0 auto;
		padding: 24rpx;
		font-size: 28rpx;
		color: rgba(102, 102, 102, 1);
	}

	.invite-label {
		width: 686rpx;
		margin: 0 auto;
		padding: 32rpx 0 28rpx 0;
		display: flex;
		align-items: center;

		&>span {
			width: 8rpx;
			height: 28rpx;
			border-radius: 228rpx;
			background: rgba(253, 150, 24, 1);
			display: inline-block;
			margin-right: 16rpx;
		}

		&>view {
			display: inline-block;
			color: rgba(77, 77, 77, 1);
			font-size: 32rpx;
		}
	}

	.invite-list {
		flex: 1;
		overflow: hidden;
		position: relative;
	}

	.invite-list-item {
		margin: 0 32rpx;
		border-radius: 24rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 24rpx;
		padding: 24rpx;
		display: flex;
		height: 180rpx;
	}

	.invite-list-item-left {
		flex: 1;

		.left-t {
			font-size: 28rpx;
			color: rgba(0, 0, 0, 1);
		}

		.left-o {
			font-size: 24rpx;
			color: rgba(153, 153, 153, 1);
			margin-top: -2rpx;
		}
	}

	.invite-list-item-right {
		color: rgba(255, 51, 76, 1);
		font-size: 32rpx;
		text-align: right;
		line-height: 132rpx;
	}

	.share-poup {
		background-color: #fff;
		border-radius: 32rpx;
		margin: 0 64rpx;
		padding: 56rpx 110rpx;
		text-align: center;

		.share-icon {
			width: 170rpx;
			height: 170rpx;
			border-radius: 85rpx;
			display: inline-flex;
			background: rgba(45, 193, 0, 1);
			justify-content: center;
			align-items: center;
			margin: 40rpx 56rpx 96rpx 56rpx;

			image {
				width: 104rpx;
				height: 104rpx;
			}
		}

		.share-btn {
			width: 400rpx;
			margin: 0 auto;
			height: 96rpx;
			border-radius: 450rpx;
			background: linear-gradient(90deg, rgba(235, 84, 59, 1) 0%, rgba(242, 161, 64, 1) 100%);
			box-shadow: 0px 0px 16rpx rgba(0, 0, 0, 0.04);
		}
	}

	.uni-icon {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}
</style>
